<template>
    <div class="container">
        <el-card>
            <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">
                <el-form-item label="学科名称" class="demo-input-size">
                    <el-input
                        size="small"
                        v-model="form.subject"
                        placeholder="学科名称">

                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit">清除</el-button>
                    <el-button type="primary" @click="search" :value="form.subject">搜索</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button
                        @click="dialogVisible = true"
                        icon="el-icon-edit"
                        type="success">
                        新增学科
                    </el-button>
                </el-form-item>

                <el-alert :title="`数据一共${total}条`" type="info" show-icon class="elalert" :closable="false"></el-alert>

                <el-table
                    :header-cell-style="{ background: '#FAFAFA' }"
                    stripe
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        :index="indexMethod"
                        prop="isFrontDisplay"
                        label="序号">
                    </el-table-column>
                    <el-table-column prop="subjectName" label="学科名称">
                    </el-table-column>
                    <el-table-column prop="username" label="创建者">
                    </el-table-column>
                    <el-table-column prop="addDate" label="创建日期">
                        <template slot-scope="{ row }">
                            {{ formatDate(row.addDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="isFrontDisplay"
                        label="前台是否显示">
                        <template #default="{ row }">{{ row.isFrontDisplay === 1 ? '是' : '否'  }}</template>
                    </el-table-column>
                    <el-table-column prop="twoLevelDirectory" label="二级目录">
                    </el-table-column>
                    <el-table-column prop="tags" label="标签"></el-table-column>
                    <el-table-column prop="totals" label="题目数量"></el-table-column>
                    <el-table-column label="操作" width="250px">
                        <template #default="{ row }">
                            <el-button type="text" @click="classification(row)">学科分类</el-button>
                            <el-button type="text" @click="LaBle(row)">学科标签</el-button>
                            <el-button type="text" @click="made(row)">修改</el-button>
                            <el-button type="text" @click="del(row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    background
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="->,prev, pager, next,sizes, jumper"
                    :total="total">
                </el-pagination>
                <!-- 添加 -->
                <el-dialog
                    title="新增学科"
                    :visible.sync="dialogVisible"
                    width="340px"
                    :before-close="handleClose">
                    <el-form :rules="formRules" ref="form" :model="form" class="elform">
                        <el-form-item label="学科名称" prop="subName">
                            <el-input
                                style="width: 300px"
                                placeholder="请输入学科名称"
                                v-model="form.subName"
                                clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="是否显示">
                            <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
                </el-dialog>
                <!-- 删除 -->
                <el-dialog
                    title="提示"
                    :visible.sync="removeSub"
                    width="25%"
                    :before-close="handleClose">
                    <el-alert title="该操作将会删除此学科" type="info"></el-alert>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="removeSub = false" style="margin:20px 5px 0 0 ">取 消</el-button>
                        <el-button
                            type="primary"
                            @click="subActions"
                            style="margin-top:20px"
                            center>
                            确认
                        </el-button>
                    </div>
                </el-dialog>
                <!-- 修改 -->
                <el-dialog
                    title="修改学科"
                    :visible.sync="editDialogVisible"
                    width="400px"
                    :before-close="handleClose">
                    <el-form>
                        <el-form-item label="学科名称">
                            <el-input
                                style="width: 340px"
                                placeholder="请输入学科名称"
                                v-model="input1"
                                clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="是否显示">
                            <el-switch
                                v-model="value"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="queding">确 定</el-button>
                    </span>
                </el-dialog>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { update, remove, add, detail, getSubjectsList } from '@/api/hmmm/subjects'

export default {
    data () {
        return {
            userId: '',
            value: true,
            removeSub: false,
            input1: '',
            // 修改弹窗开关
            editDialogVisible: false,
            // 添加弹窗开关
            dialogVisible: false,
            current: 1,
            pagesize: 10,
            total: 0,
            form: {
                subName: '',
                subject: ''
            },
            tableData: [],
            formRules: {
                subName: [
                    {
                        required: true,
                        message: '输入的学科名称不能为空',
                        trigger: ['blur', 'change']
                    },
                    {
                        min: 2,
                        max: 9,
                        message: '输入长度不能小于3位大于9位',
                        trigger: ['blur', 'change']
                    }
                ]
            }
        }
    },
    created () {
        this.initData()
    },
    methods: {
        // 时间
        formatDate (dateString) {
            const date = new Date(dateString)
            const year = date.getFullYear()
            const month = `0${date.getMonth() + 1}`.slice(-2)
            const day = `0${date.getDate()}`.slice(-2)
            const hour = `0${date.getHours()}`.slice(-2)
            const minute = `0${date.getMinutes()}`.slice(-2)
            const second = `0${date.getSeconds()}`.slice(-2)
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`
        },
        handleClose (done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done()
                })
                .catch((_) => {
                })
        },
        // 序号
        indexMethod (index) {
            return index + 1
        },
        // 清空输入框
        onSubmit () {
            this.form.subject = ''
            this.initData()
        },
        // 分页
        handleSizeChange (val) {
            this.pagesize = val
            this.initData()
        },
        handleCurrentChange (val) {
            this.current = val
            this.initData()
        },
        // 渲染数据
        async initData () {
            const res = await getSubjectsList({
                page: this.current,
                pagesize: this.pagesize,
                subjectName: this.form.subject
            })
            this.total = res.data.counts
            this.tableData = res.data.items
        },
        // 搜索
        search () {
            this.current = 1
            this.initData()
            this.$message.success('搜索成功')
        },
        // 添加
        async submit () {
            await this.$refs.form.validate()
            await add({
                subjectName: this.form.subName,
                isFrontDisplay: this.value
            })
            this.$message.success('添加成功')
            this.current = 1
            this.form.subName = ''
            this.initData()
            this.dialogVisible = false
        },
        // 打开修改弹窗
        async made (row) {
            this.editDialogVisible = true
            const des = await detail(row)
            this.value = !!des.data.isFrontDisplay
            this.userId = des.data
            this.input1 = des.data.subjectName
        },
        // 修改数据
        async queding () {
            const dd = await update({
                id: this.userId.id,
                subjectName: this.input1,
                isFrontDisplay: this.value ? 1 : 0
            })
            const aaaaa = JSON.parse(dd.config.data)
            aaaaa.subjectName = this.input1
            this.initData()
            this.$message.success('修改成功')
            this.editDialogVisible = false
        },
        // 删除数据
        del (id) {
            this.removeID = id
            this.removeSub = true
        },
        async subActions () {
            await remove({ id: this.removeID })
            this.$message.success('删除成功')
            this.removeSub = false
            if (this.tableData.length === 1 && this.current > 1) this.current--
            await this.initData()
        },
        // 跳转目录传参
        classification (row) {
            this.$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)
        },
        // 跳转标签传参
        LaBle (row) {
            this.$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)
        }
    }
}
</script>

<style scoped lang="scss">
.el-pagination {
    margin-top: 20px;
}

.elalert {
    margin-bottom: 15px;
}

::v-deep .el-table__body-wrapper {
    overflow: hidden;
}

.el-card {
    margin-top: 1px;
    // margin-left: 20px;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 16px;
    }

    .actions {
        font-size: 18px;
        display: flex;
        justify-content: space-around;
        color: #666666;

        > i:hover {
            color: rgba(114, 124, 245, 1);
            cursor: pointer;
        }
    }
}

.elform {
    display: flex;
    flex-direction: column;
}

::v-deep .el-pagination__jump {
    margin-left: 0;
}

.el-form {
    background: #FFFFFF;
}
</style>
